<template>
    <div id="container" class="card-container">
        <el-card class="card-item" style="width: 200px" shadow="hover">
            <div class="flex-container">
                <div class="icon">
                    <svg t="1718644054547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" width="100" height="100"><path d="M696.39 194.61c-59.34-53.14-135.99-77.49-215.8-68.73-128.84 14.24-231.34 118.3-243.73 247.46-7.39 76.96 16.36 151.18 66.86 209 34.05 38.96 52.8 88.22 52.8 138.7V836.6c0 34.66 28.2 62.87 62.87 62.87h185.24c34.67 0 62.87-28.21 62.87-62.87V721.94c0-52.17 17.79-100.66 50.09-136.56 45.71-50.79 70.88-116.41 70.88-184.77 0-78.5-33.56-153.59-92.08-206zM670.2 546.54c-29.91 33.24-47.67 76.75-50.88 123.83h-92.59V459.79c0-8.13-6.6-14.73-14.73-14.73s-14.72 6.6-14.72 14.73v210.56h-92.56c-3.26-46.13-21.79-90.45-53-126.18-38.86-44.48-57.13-101.61-51.44-160.88 9.54-99.33 88.36-179.37 187.44-190.3 61.5-6.8 120.51 11.98 166.15 52.86 45.03 40.34 70.86 98.12 70.86 158.53 0 52.6-19.36 103.08-54.53 142.16z" fill="#1296db" p-id="1575"></path></svg>
                </div>
                <div class="content" style="margin-top: 5px; ">
                    <span>路灯的总数</span>
                    <p>213</p>
                </div>
            </div>
        </el-card>
        <el-card class="card-item" style="width: 200px" shadow="hover">
            <div class="flex-container">
                <div class="icon">
                    <svg t="1718644054547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" width="128" height="128"><path d="M696.39 194.61c-59.34-53.14-135.99-77.49-215.8-68.73-128.84 14.24-231.34 118.3-243.73 247.46-7.39 76.96 16.36 151.18 66.86 209 34.05 38.96 52.8 88.22 52.8 138.7V836.6c0 34.66 28.2 62.87 62.87 62.87h185.24c34.67 0 62.87-28.21 62.87-62.87V721.94c0-52.17 17.79-100.66 50.09-136.56 45.71-50.79 70.88-116.41 70.88-184.77 0-78.5-33.56-153.59-92.08-206zM670.2 546.54c-29.91 33.24-47.67 76.75-50.88 123.83h-92.59V459.79c0-8.13-6.6-14.73-14.73-14.73s-14.72 6.6-14.72 14.73v210.56h-92.56c-3.26-46.13-21.79-90.45-53-126.18-38.86-44.48-57.13-101.61-51.44-160.88 9.54-99.33 88.36-179.37 187.44-190.3 61.5-6.8 120.51 11.98 166.15 52.86 45.03 40.34 70.86 98.12 70.86 158.53 0 52.6-19.36 103.08-54.53 142.16z" fill="#64ef6e" p-id="1575"></path></svg>
                </div>
                <div class="content" style="margin-top: 5px; ">
                    <span>在线路灯数</span>
                    <p>213</p>
                </div>
            </div>
        </el-card>
        <el-card class="card-item" style="width: 200px" shadow="hover">
            <div class="flex-container">
                <div class="icon">
                    <svg t="1718644054547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" width="128" height="128"><path d="M696.39 194.61c-59.34-53.14-135.99-77.49-215.8-68.73-128.84 14.24-231.34 118.3-243.73 247.46-7.39 76.96 16.36 151.18 66.86 209 34.05 38.96 52.8 88.22 52.8 138.7V836.6c0 34.66 28.2 62.87 62.87 62.87h185.24c34.67 0 62.87-28.21 62.87-62.87V721.94c0-52.17 17.79-100.66 50.09-136.56 45.71-50.79 70.88-116.41 70.88-184.77 0-78.5-33.56-153.59-92.08-206zM670.2 546.54c-29.91 33.24-47.67 76.75-50.88 123.83h-92.59V459.79c0-8.13-6.6-14.73-14.73-14.73s-14.72 6.6-14.72 14.73v210.56h-92.56c-3.26-46.13-21.79-90.45-53-126.18-38.86-44.48-57.13-101.61-51.44-160.88 9.54-99.33 88.36-179.37 187.44-190.3 61.5-6.8 120.51 11.98 166.15 52.86 45.03 40.34 70.86 98.12 70.86 158.53 0 52.6-19.36 103.08-54.53 142.16z" fill="#cdcdcd" p-id="1575"></path></svg>
                </div>
                <div class="content" style="margin-top: 5px; ">
                    <span>离线路灯数</span>
                    <p>213</p>
                </div>
            </div>
        </el-card>
        <el-card class="card-item" style="width: 200px" shadow="hover">
            <div class="flex-container">
                <div class="icon">
                    <svg t="1718644054547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" width="128" height="128"><path d="M696.39 194.61c-59.34-53.14-135.99-77.49-215.8-68.73-128.84 14.24-231.34 118.3-243.73 247.46-7.39 76.96 16.36 151.18 66.86 209 34.05 38.96 52.8 88.22 52.8 138.7V836.6c0 34.66 28.2 62.87 62.87 62.87h185.24c34.67 0 62.87-28.21 62.87-62.87V721.94c0-52.17 17.79-100.66 50.09-136.56 45.71-50.79 70.88-116.41 70.88-184.77 0-78.5-33.56-153.59-92.08-206zM670.2 546.54c-29.91 33.24-47.67 76.75-50.88 123.83h-92.59V459.79c0-8.13-6.6-14.73-14.73-14.73s-14.72 6.6-14.72 14.73v210.56h-92.56c-3.26-46.13-21.79-90.45-53-126.18-38.86-44.48-57.13-101.61-51.44-160.88 9.54-99.33 88.36-179.37 187.44-190.3 61.5-6.8 120.51 11.98 166.15 52.86 45.03 40.34 70.86 98.12 70.86 158.53 0 52.6-19.36 103.08-54.53 142.16z" fill="#d81e06" p-id="1575"></path></svg>    
                </div>
                <div class="content" style="margin-top: 5px; ">
                    <span>故障路灯数</span>
                    <p>213</p>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
#container {
  display: flex;
  justify-content: space-between; /* 或者其他适合的值，如 space-around */
  flex-wrap: wrap; /* 允许卡片换行 */
  width: 1000px;
  height: auto; /* 自适应高度 */
  padding: 0 20px; /* 调整容器的左右内边距 */
  margin: 0 auto;
}

.card-item {
  margin-bottom: 20px; /* 可选，控制卡片之间的垂直间距 */
  width: 200px; /* 固定卡片宽度 */
  border-radius: 10px; /* 设置卡片的边框弧度为 10px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.flex-container {
  display: flex;
}

.icon svg {
  width: 50px; /* 设置 SVG 宽度 */
  height: 50px; /* 设置 SVG 高度 */
}

.content {
  margin-left: 10px;
  p {
    color: #558eff;
    font-weight: 600;
    font-size: 20px;
  }
  span {
    font-weight: 600;
  }
}
</style>
